<template>
  <el-carousel :interval="4000" type="card" height="300px">
    <el-carousel-item v-for="item in carouselItems" :key="item.id">
      <a :href="item.policyLink" target="_blank" class="carousel-link">
        <div class="carousel-content">
          <img :src="item.image" :alt="item.title" class="carousel-image" />
          <div class="carousel-overlay">
            <h3>{{ item.title }}</h3>
            <p>{{ item.description }}</p>
            <p class="policy-link-text">
              查看政策详情 <el-icon><Right /></el-icon>
            </p>
          </div>
        </div>
      </a>
    </el-carousel-item>
  </el-carousel>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Right } from '@element-plus/icons-vue'
import axios from 'axios'

// 轮播图数据
const carouselItems = ref([])

// 加载轮播图数据
const loadCarouselData = async () => {
  try {
    const response = await axios.get(
      'http://localhost:8080/hospital5_war/carousel/findAll',
      {
        headers: {
          'Content-Type': 'application/json'
        }
      }
    );
    
    console.log('轮播图数据加载成功:', response.data);
    
    // 将后端数据转换为前端需要的格式
    if (response.data && Array.isArray(response.data)) {
      carouselItems.value = response.data
        .filter(item => item.is_valid === 1) // 只显示有效的轮播图
        .map(item => ({
          id: item.id,
          image: item.img || 'https://picsum.photos/id/237/800/400', // 使用后端图片或默认图片
          title: item.title || '政策标题',
          description: item.content || '政策描述',
          policyLink: `#notice-${item.notice_id}` || '#' // 链接到对应的通知
        }));
    }
    
    // 如果没有数据或数据为空，使用默认数据
    if (carouselItems.value.length === 0) {
      carouselItems.value = [
        {
          id: 1,
          image: 'https://picsum.photos/id/237/800/400',
          title: '分级诊疗政策',
          description: '建立"基层首诊、双向转诊"就医模式，优化医疗资源配置',
          policyLink: 'https://www.gov.cn/zhengce/content/2015-09/11/content_10158.htm'
        },
        {
          id: 2,
          image: 'https://picsum.photos/id/238/800/400',
          title: '智慧医院建设',
          description: '推进"互联网+医疗健康"，提升医疗服务智能化水平',
          policyLink: 'https://www.gov.cn/zhengce/zhengceku/2020-05/22/content_5513897.htm'
        },
        {
          id: 3,
          image: 'https://picsum.photos/id/239/800/400',
          title: '电子病历政策',
          description: '规范电子病历管理，实现全流程追踪与跨机构共享',
          policyLink: 'https://www.gov.cn/zhengce/zhengceku/2018-12/31/content_5435418.htm'
        }
      ];
    }
    
  } catch (error) {
    console.error('轮播图数据加载失败:', error);
    
    // 加载失败时使用默认数据
    carouselItems.value = [
      {
        id: 1,
        image: 'https://picsum.photos/id/237/800/400',
        title: '分级诊疗政策',
        description: '建立"基层首诊、双向转诊"就医模式，优化医疗资源配置',
        policyLink: 'https://www.gov.cn/zhengce/content/2015-09/11/content_10158.htm'
      },
      {
        id: 2,
        image: 'https://picsum.photos/id/238/800/400',
        title: '智慧医院建设',
        description: '推进"互联网+医疗健康"，提升医疗服务智能化水平',
        policyLink: 'https://www.gov.cn/zhengce/zhengceku/2020-05/22/content_5513897.htm'
      },
      {
        id: 3,
        image: 'https://picsum.photos/id/239/800/400',
        title: '电子病历政策',
        description: '规范电子病历管理，实现全流程追踪与跨机构共享',
        policyLink: 'https://www.gov.cn/zhengce/zhengceku/2018-12/31/content_5435418.htm'
      }
    ];
  }
}

// 组件挂载时加载数据
onMounted(() => {
  loadCarouselData()
})
</script>

<style scoped>
/* 轮播图样式 */
.carousel-link {
  display: block;
  height: 100%;
  width: 100%;
}

.carousel-content {
  position: relative;
  height: 100%;
  width: 100%;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.carousel-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
  padding: 20px;
  color: white;
  border-radius: 0 0 4px 4px;
}

.carousel-overlay h3 {
  font-size: 18px;
  margin: 0 0 10px 0;
  font-weight: 600;
}

.carousel-overlay p {
  margin: 0 0 15px 0;
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.9;
}

.policy-link-text {
  display: flex;
  align-items: center;
  font-size: 14px;
  opacity: 0.9;
}
</style>